<template>
  <div style="width: 100%;">
    <div>
      <el-row>
        <ul style="margin:0px;padding:0px">
          <li
            v-for="item in entityData"
            :key="item.id"
            style="line-height:30px;border-bottom: 1px dashed;width:49%;float:left;overflow:hidden;word-break:keep-all;white-space:nowrap;text-overflow:ellipsis;cursor: pointer"
          >
            <i class="el-icon-caret-right" />
            <a :title="item.name" :href="item.url" target="_blank">{{ item.name }}</a>
          </li>
        </ul>
      </el-row>
    </div>
    <el-dialog
      :visible.sync="visible"
      append-to-body
      width="500px"
      title="收藏项配置"
      class="custom"
      @close="delInvaild"
      @open="validate"
    >
      <div style="text-align: right;margin-right: 10px;cursor: pointer">
        <i class="el-icon-plus" title="添加" @click="addRow" />
        <i class="el-icon-refresh" title="刷新" @click="get" />
      </div>
      <el-row>
        <ul style="margin:0px;padding:0px">
          <draggable v-model="entityData" @start="drag=true" @end="drag=false">
            <li
              v-for="item in entityData"
              :key="item.id"
              style="line-height:30px;border-bottom: 1px dashed;width:100%;overflow:hidden;word-break:keep-all;white-space:nowrap;text-overflow:ellipsis;cursor: move;"
            >
              <div style="width: 95%;display: inline-block;padding: 5px 3px;">
                <label for="name">名称</label>
                <el-input
                  id="name"
                  v-model="item.name"
                  size="mini"
                  style="width: 90%;"
                  @blur="validate"
                  @focus="normalized"
                />
                <br />
                <label for="url">地址</label>
                <el-input
                  id="url"
                  v-model="item.url"
                  size="mini"
                  style="width: 90%;"
                  @blur="validate"
                  @focus="normalized"
                />
              </div>
              <div class="del">
                <i class="el-icon-delete" @click="delRow(item)" />
              </div>
            </li>
            <li
              style="list-style: none;color: red;font-size: 16px;margin-top: 10px;padding-bottom: 5px;"
            >
              <div id="errMsgDiv" ref="errMsgDiv">{{ errMsg }}</div>
            </li>
          </draggable>
        </ul>
      </el-row>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="save()">确定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { uuid } from '@/utils'
import draggable from 'vuedraggable'

export default {
  name: 'userFavorite',
  components: {
    draggable
  },
  // 设置绑定参数
  model: {
    prop: 'value',
    event: 'input'
  },
  props: {
    config: {
      type: Array,
      default: function () {
        return []
      }
    },
    dialogVisible: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      visible: false,
      name: '名字',
      url: '地址',
      selectedIds: [],
      entityData: [],
      errMsg: ''
    }
  },
  watch: {
    dialogVisible(val) {
      this.visible = val
    },
    visible(val) {
      this.$emit('update:dialogVisible', val)
    }
  },
  mounted: function () {
    this.get()
  },
  methods: {
    get() {
      this.config.forEach(item => {
        if (item.paramCode === 'item') {
          this.entityData = JSON.parse(item.paramValue)
          this.delInvaild()
        }
      })
    },
    save() {
      if (!this.validate()) {
        this.$refs.errMsgDiv.scrollIntoView()
        return
      }
      this.visible = false
      // 提交config
      const configData = this.config
      if (configData && configData.length > 0) {
        configData.forEach(item => {
          if (item.paramCode === 'item') {
            this.delInvaild()
            item.paramValue = JSON.stringify(this.entityData)
          }
        })
      } else {
        configData.push({
          paramName: '收藏项',
          paramCode: 'item',
          paramValue: '[]'
        })
      }
      this.$emit('update:config', configData)
    },
    addRow() {
      const index = this.entityData.length
      this.entityData.splice(index + 1, 0, {
        rId: uuid(),
        name: '',
        url: ''
      })
    },
    delRow(row) {
      let index = -1
      if (row.id) {
        index = this.entityData.findIndex(x => x.id === row.id)
      } else {
        index = this.entityData.findIndex(x => x.rId === row.rId)
      }
      this.entityData.splice(index, 1)
    },
    handleSelectionChange(val) {
      const selected = []
      val.forEach((val) => {
        this.entityData.forEach((v) => {
          if (val.id === v.id) {
            selected.push(v.id)
          }
        })
        this.selectedIds = selected
      })
    },
    delInvaild() {
      if (this.entityData) {
        this.entityData = this.entityData.filter(e => e.name)
      }
    },
    validate() {
      const valid = this.entityData.filter(item => !item.name || !item.url).length === 0
      if (valid) {
        this.errMsg = ''
      } else {
        this.errMsg = '存在名称或地址为空的数据'
      }
      return valid
    },
    normalized(event) {
      event.target.onpointerdown = function (e) {
        e.stopPropagation()
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.custom {
  .el-dialog__body {
    max-height: 300px;
    overflow-y: auto;
  }
}
</style>

<style scoped>
.del {
  display: inline-block;
  vertical-align: middle;
  float: right;
  margin-top: 22px;
  width: 5%;
}
</style>
